<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <a-card style="margin-top: 24px">
      <a-table
        bordered
        :data-source="messageList"
        :columns="columns"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :pagination="pagination"
      >
        <template slot="qrCode" slot-scope="text">
          <img :src="text" width="100" />
        </template>

        <template slot="action" slot-scope="text, record">
          <a-button type="link" @click="onToggleTop(record)"
            >{{ record.ifTop == 0 ? '置顶' : '取消置顶' }}
          </a-button>
          <a-button type="link" @click="onView(record)">查看 </a-button>
          <a-button type="link" @click="onViewNum(record)"
            >查看接受人数</a-button
          >
          <a-popconfirm
            title="确认删除该载体信息吗?"
            @confirm="() => onDelete(record)"
          >
            <a-button class="del-btn" type="link" v-if="record.ifDel == 0"
              >删除</a-button
            >
          </a-popconfirm>
        </template>
      </a-table>
      <!-- 查看 -->
      <Drawer ref="drawer" />
    </a-card>
  </div>
</template>

<script>
import { dataSource as ds } from '@/services'
import { mapState } from 'vuex'
import config from './config.js'
import Drawer from './components/drawer'
export default {
  name: 'message',
  components: {
    Drawer
  },
  data() {
    return {
      loading: false,
      columns: config.columns,
      pages: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      messageList: []
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
    pagination() {
      return {
        size: 'default',
        current: this.pages?.page || 1,
        pagesize: this.pages?.pageSize || 10,
        total: this.pages?.total || 0,
        showSizeChanger: true,
        showLessItems: true,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: (total, range) => {
          ;`第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
        },
        onChange: this.onChangePage,
        onShowSizeChange: this.onChangeSize
      }
    }
  },
  mounted() {
    this.getMessageList()
  },
  methods: {
    getMessageList() {
      this.loading = true
      const { page, pageSize } = this.pages
      ds.messageList({ messageType: 0, page, pageSize }).then((res) => {
        if (res?.data?.code == 200) {
          this.loading = false
          const { records, current, size, total } = res?.data?.data
          this.messageList = records ?? []
          this.pages = {
            page: current ?? 1,
            pageSize: size ?? 10,
            total: total ?? 0
          }
        }
      })
    },
    // 置顶/取消置顶
    onToggleTop(e) {
      const { id, ifTop } = e
      if (ifTop == 0) {
        ds.updateMessage({ id, ifTop: 1 }).then((res) => {
          if (res?.data?.code == 200) {
            this.$message.success('置顶成功!')
            this.getMessageList()
          }
        })
      } else {
        ds.updateMessage({ id, ifTop: 0 }).then((res) => {
          if (res?.data?.code == 200) {
            this.$message.success('取消置顶!')
            this.getMessageList()
          }
        })
      }
    },
    // 查看
    onView(e) {
      this.$refs.drawer.open({ caption: '详情', type: 'info', ...e })
    },
    // 查看接受人数
    async onViewNum(e) {
      const res = await ds.messageUserList({ id: e.id })
      this.$refs.drawer.open({
        caption: '查看接受人数',
        type: 'num',
        list: res?.data?.data
      })
    },
    // 删除学校
    onDelete(e) {
      ds.updateMessage({ id: e.id, ifDel: 1 }).then((res) => {
        if (res?.data?.code == 200) {
          this.$message.success('删除成功!')
          this.getMessageList()
        }
      })
    },
    onChangePage(page, size) {
      this.pages.page = page
      this.pages.pageSize = size
      this.getMessageList()
    },
    onChangeSize(page, size) {
      this.pages.page = page
      this.pages.pageSize = size
      this.getMessageList()
    }
  }
}
</script>

<style lang="less">
.listTitle {
  display: flex;
  justify-content: space-between;
}

.w-100 {
  width: 100%;
}
.dot {
  margin-right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.del-btn {
  color: #f5222d !important;
}
</style>
